<template>
  <div class="search-form-container">
    <div :class="{ 'search-form-area': true, close: showDrawer && operation === '展开' }">
      <slot />
    </div>
    <div v-if="showDrawer" class="drawer-button" @click="changeDrawer">
      {{ operation }}
      <i :class="{ 'drawer-arrow': true, 'el-icon-arrow-down': operation === '展开', 'el-icon-arrow-up': operation === '收起'}" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchFormContainer',
  props: {
    needDraw: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showDrawer: false,
      operation: '展开',
      arrowClass: 'el-icon-arrow-down'
    }
  },
  mounted() {
    // 判断是否要显示收起
    if (this.needDraw) {
      const list = document.getElementsByClassName('search-form-container')[0].getElementsByClassName('el-form-item')
      if (list[list.length - 1].offsetTop > 40) {
        this.showDrawer = true
      }
    }
  },
  methods: {
    changeDrawer() {
      this.operation = this.operation === '展开' ? '收起' : '展开'
    }
  }
}
</script>

<style lang="less" scoped>
  /* 列表上的搜索区域 */
  .search-form-container {
    background: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    position: relative;
    > .search-form-area {
      padding-right: 85px;
      overflow: hidden;
      &.close {
        height: 45px;
      }
      /* 重写内部form的样式 */
      ::v-deep .el-form-item {
        .el-form-item__content {
          .el-input {
            font-size: 13px;
            width: 250px;
          }
          .el-select {
            width: 100%;
          }
          .el-range-editor {
            width: 100%;
            .el-range-input {
              font-size: 12px;
            }
          }
        }
      }
    }
    > .drawer-button {
      position: absolute;
      top: 8px;
      right: 18px;
      color: #5A5E66;
      cursor: pointer;
    }
  }
</style>
